
import { FC, useEffect, useRef } from "react"
import * as echarts from 'echarts';
import { EChartsOption } from "echarts";
import { IDateCountGoodsPart } from "../../../../../../../type/DataStatistics/api";

const TableTwo: FC<{
    datalistTwo?: IDateCountGoodsPart[],
}> = ({
    datalistTwo
}) => {
        const echartsBox = useRef<HTMLDivElement>(null);
        let echartsClass = useRef<echarts.ECharts>();
        useEffect(() => {
            // 初始化echarts
            if (echartsBox && datalistTwo) {
                var echarts_box_html = document.getElementById('echarts_box2')!;
                echartsClass.current = echarts.init(echarts_box_html);

                var option: EChartsOption = {
                    grid: {
                        left: '4%',  // 左边距
                        right: '4%', // 右边距
                        bottom: '10%', // 下边距
                        top: '10%',    // 上边距
                        containLabel: true // 确保标签不被遮挡
                      },
                    series: [{
                        type: 'pie',
                        radius: [30, '55%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 8
                        },
                        label: {
                            show: true,
                            color: '#999',
                            formatter: function (params: any) {
                                // 计算百分比
                                return `${params.name} - ${params.value }%`;
                            }
                        },
                        data: datalistTwo.map(item => ({
                            name: item.product,
                            value: item.proportion,
                        })),
                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params: any) {
                            // 计算百分比
                            return `${params.name} - ${params.value}%`;
                        }
                    },
                };
                option && echartsClass.current.setOption(option);
                echartsClass.current.resize()


            }
            return () => {
                echartsClass.current?.dispose();
            }
        }, [datalistTwo])
        return (
            <div id="echarts_box2" style={{
                width: '100%',
                height: '31.5rem',
                backgroundColor: '#fff',
            }} ref={echartsBox}></div>
        )
    }

export default TableTwo;